@import 'variables';
@import 'mixin';

.emoji--top-right {
  &:before {
    position: absolute;
    left: $space-normal;
    top: -$space-normal;
    @include arrow('top', $light-gray, $space-normal);
  }
}

.emoji-dialog-header {
  padding: $zero $space-normal;
  background-color: $light-gray;
  border-top-left-radius: $space-normal;
  border-top-right-radius: $space-normal;
  margin: $zero;
  list-style: none;
  text-align: center;

  li {
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    padding: $space-medium;
    cursor: pointer;

    &.active {
      background: $color-white;
      border-top-left-radius: $space-small;
      border-top-right-radius: $space-small;
      padding-top: $space-small;
    }
  }
}
.emoji-dialog {
  width: 360px;
  height: 248px;
  background: $color-white;
  @include elegant-card;
  position: absolute;
  left: $space-small;
  top: 56px;
    

  .emojione {
    margin: $zero;
    font-size: $space-normal;
  }

  .emoji-row {
    box-sizing: border-box;
    overflow-y: scroll;
    height: 200px;
    padding: $space-medium;

    .emoji {
      display: inline-block;
      padding: $space-small;
      border-radius: $space-small;
    }

    .emojione{
      margin: $space-medium;
      float:left;
      cursor: pointer;
      &:hover {
        opacity: 0.4;
      }
    }

  }

  .emoji-category-title {
    font-size: 14px;
    font-weight: 500;
    text-indent: $space-small;
    text-transform: capitalize;
    margin: $zero;
    font-family: $font-family;
  }
  .emoji-category-heading-decoration {
    text-align: right;
  }

}

.emoji-dialog .emoji-category-header > * {
  display: table-cell;
  vertical-align: middle;
}

.emoji-dialog .emoji-row
.emoji-dialog .emoji-row .emoji:hover {
  background: #eaeaea;
}
